<template>
	<view class="page_box">
		<!-- 搜索框 -->
		<view class="head_box u-p-x-10 u-m-t-20">
			<uni-search-bar clearButton="always" cancelButton="none" @cancel="onSearch" v-model="searchVal"
				@confirm="onSearch" bgColor="#FFFFFF" :minHeight="54" :radius="10" placeholder="输入昵称, 企业, 行业等"></uni-search-bar>
		</view>
		<view class="u-p-x-30">
			<!-- 热门搜索 -->
			<view class="hotSearch ">
				<view class="u-flex u-row-between u-m-t-20" >
					<view class="u-font-36 u-weight-700">热门搜索</view>
				</view>
				<view class="u-flex u-m-t-40 u-m-b-20 u-flex-wrap " >
					<view @tap="onSearch({value:item.searchText})" class="span-item u-m-r-16 u-font-30 u-p-x-20 u-p-y-6 u-m-t-16" style="background-color: #FFFFFF;border-radius: 20rpx;" v-for="(item,index) in acList" :key="index">
						{{item.searchText}}
					</view>
				</view>
			</view>
		</view>
			<view class="content_box">
			<view class="search-history">
				<view class="title-box u-flex u-row-between u-m-b-40">
					<view class="title">历史记录</view>
					<button class="u-reset-button clear-history-btn u-flex" @tap="clearSearchHistory()">
						<u-icon name="trash" color="#666666" size="20"></u-icon>
						<text class="u-m-l-10">清除记录</text>
					</button>
				</view>
				<view class="content u-flex-col ">
					<view class="item"  @tap="onSearch({value:item})" v-for="(item, index) in historyTag" :key="index">
						<view class="u-flex">
							<u-icon name="search" color="#999999" size="20" ></u-icon>
							<view style="color: #999999;margin-left: 10rpx;">{{ item }}</view>
						</view>
						<view @tap.stop="removeBytag(item,index)">
							<u-icon name="close" color="#999999" size="20" ></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	import {queryHotSearchText} from '@/common/api/common.js'
	export default {
		components: {},
		data() {
			return {
				searchVal: '',
				historyTag: [],
				acList:[]
			};
		},
		computed: {},
		onShow() {
			this.historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) : [];
		},
		onLoad:function(){
			this.queryHotSearchText()
		},
		methods: {
			//获取热门搜索词
			queryHotSearchText(){
				queryHotSearchText({moduleNo:'mingpian'}).then(res=>{
					if(res.data && res.data.code){
						this.acList = res.data && res.data.listData || []
					}
				})
			},
			// 搜索
			onSearch(e) {
				if (e.value && !this.historyTag.includes(e.value)) {
					let searchHistoryArr = JSON.stringify(this.getArr(this.historyTag, e.value));
					uni.setStorageSync('searchHistoryArr', searchHistoryArr);
				}
				if (e.value) {
					uni.$u.route({
						url: `pages/comment/searchPage/searchData?keywords=${e.value}`
					})
				}
				this.searchVal = '';
			},
			removeBytag(item,index){
				this.historyTag.forEach((items,index)=>{
					if(item==items){
						//删除指定的历史记录
						this.historyTag.splice(index,1)
					}
				})
				uni.setStorageSync('searchHistoryArr', JSON.stringify(this.historyTag));
			},

			// 清除输入框
			clearSearch() {
				this.searchVal = '';
			},
			// 队列
			getArr(list, item) {
				let arr = list;
				let length = 10; //队列长度
				arr.length < length ? arr.unshift(item) : arr.pop();
				return arr;
			},
			// 清除历史记录
			clearSearchHistory() {
				uni.showModal({
					title: '提示',
					content: '您确定要清空历史记录吗？',
					success: (e) => {
						if (e.confirm) {
							this.historyTag = [];
							uni.removeStorageSync('searchHistoryArr');
						}
					}
				})
			}
		}
	};
</script>
<style lang="scss">
	.page_box {
		background-color: #F7F8FC;
		min-height: calc(100vh - var(--window-top)); 
		.hotSearch {
			.nav-bar-wrap {
				display: flex;
				flex-flow: column wrap;
				width: 100%;
				height: 364rpx;
				// background-color: lavender;
			}
		}
	}

	.search-history {
		padding: 30rpx;
		.title-box {
			.title {
				font-size: 36rpx;
				font-weight: 700;
				color: #333333;
			}
			.clear-history-btn {
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
			}
		}
		.content {
			width: 100%;
			// background-color: lavender;
			.item {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;
			}
		}
	}
</style>
